<template>
  <div class="wrap">
    <div id="navBar">
      <ul class="navWrap" @mousewheel="handleMouseWheel">
        <li @click="comName = 'Recommends';ac = -1" :class="{active: ac===-1}">
          <span class="iconfont">&#xe60b;</span>
          <span class="text">推荐</span>
        </li>
        <li
        v-for="(item,index) in comList"
        :key="item.id"
        @click="comName = 'OtherFoods';ac = index;currentCate = item.cate_name"
        :class="{active: ac === index}">
          <span class="iconfont" v-html="item.cate_icon"></span>
          <span class="text">{{item.cate_name}}</span>
        </li>
      </ul>
      <div class="search">
        <input type="text">
        <button>
          <span class="iconfont">&#xe63e;</span>
        </button>
      </div>
      <div v-for="item in foods" :key="item.id">{{item.dish_name}}</div>
    </div>
    <component :is="comName" :cateName="currentCate"></component>
  </div>
</template>

<script>
import Recommends from '@/components/Category/recommends.vue'
import OtherFoods from '@/components/Category/otherFoods.vue'
import { getDishCateAPI } from '@/api/dishCategoryAPI.js'
import { getDishInfoAPI } from '@/api/dishInfoAPI.js'
export default {
  name: 'categoryBar',
  components: {
    Recommends,
    OtherFoods
  },
  data () {
    return {
      // 默认展示的组件
      comName: 'Recommends',
      // 控制导航栏样式变化
      ac: -1,
      comList: [],
      currentCate: '',
      dishes: []
    }
  },
  methods: {
    async getDishCate () {
      const token = localStorage.getItem('token')
      const { data: res } = await getDishCateAPI(token)
      this.comList = res.data
    },
    // 控制导航栏随鼠标滚动
    handleMouseWheel (e) {
      const scrollLeft = document.querySelector('.navWrap').scrollLeft
      const offsetWidth = document.querySelector('.navWrap').offsetWidth
      const scrollWidth = document.querySelector('.navWrap').scrollWidth
      if (e.wheelDelta < 0 && (scrollLeft + offsetWidth) < scrollWidth) {
        document.querySelector('.navWrap').scrollLeft = document.querySelector('.navWrap').scrollLeft + 100
      } else if (e.wheelDelta > 0 && scrollLeft > 0) {
        document.querySelector('.navWrap').scrollLeft = document.querySelector('.navWrap').scrollLeft - 100
      }
    },
    async getDishInfo () {
      const token = localStorage.getItem('token')
      const { data: res } = await getDishInfoAPI(token)
      this.dishes = res.data
    }
  },
  created () {
    this.getDishCate()
    this.getDishInfo()
  }

}
</script>

<style scoped>

</style>
